<template>
  <div id="ContactUs">
    <div class="search-box">
      <div class="search-box1"></div>
      <div class="search-box2"></div>
      <div class="search-box3"></div>
      <div class="search-box4"></div>
    </div>

    <div class="container">
      <div class="left-box"></div>
      <div class="right-box"></div>
    </div>


    <div class="form-container">
      <div class="left-box">

        <div class="message">message</div>

        <div class="gray-text">You can send us device suggestions here</div>

        <div class="phone-box">
          <div class="phone">
            <div class="line-1">phone</div>
            <div class="line-2">+8613642696524</div>
          </div>
        </div>

        <div class="email-box">
          <div class="email">
            <div class="line-1">email</div>
            <div class="line-2">vincent@vlitcoltd.com</div>
          </div>
        </div>
      </div>

      <div class="right-box">
        <!--        el-row-->
      </div>
    </div>


  </div>
</template>
<script setup name="ContactUs">
import WOW from 'wow.js'
import { onMounted } from 'vue'
// 百度地图BMap构造函数
let BMap = null
onMounted(() => {
  BMap = window.BMap
  var map = new BMap.Map('map') // 创建地图实例
  var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
  map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  var marker = new BMap.Marker(point) // 创建标注
  map.addOverlay(marker) // 将标注添加到地图中
  var opts = {
    width: 50, // 信息窗口宽度
    height: 10, // 信息窗口高度
    title: '武汉XXX公司' // 信息窗口标题
  }
  var infoWindow = new BMap.InfoWindow(
    `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
     <br>
     <span>联系方式：423</span>`,
    opts
  ) // 创建信息窗口对象
  map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
  var wow = new WOW()
  wow.init()
})
function submitForm() {
  window.open(
    'https://neveryu.github.io/web-bookmarks/interview/',
    'web-bookmarks'
  )
}
</script>

<style scoped>
#ContactUs {
  width: 100%;
  display: flex;

  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap:10px;

}
.search-box{
  display: flex;
  width: 100%;
  height: 80px;
  border: 1px red solid;
  margin-top: 0px;

  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap:7px;
  .search-box1{
    width: 160px;
    height: 45px;
    background: #30A9FC;
    border-radius: 5px 5px 5px 5px;
  }
  .search-box2{
    width: 380px;
    height: 45px;
    background: #30A9FC;
    border-radius: 5px 5px 5px 5px;
    border: 2px solid #30A9FC;
  }
  .search-box3{
    width: 380px;
    height: 45px;
    background: #30A9FC;
    border-radius: 5px 5px 5px 5px;
    border: 2px solid #30A9FC;
  }
  .search-box4{
    width: 62px;
    height: 45px;
    background: #30A9FC;
    border-radius: 5px 5px 5px 5px;
  }
}
.container{
  height: 566px;
  width: 100%;
  display: flex;
  margin: 30px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  .left-box{
    width: 1056px;
    height: 566px;
    background: #FFFFFF;
    box-shadow: 3px 0px 16px 0px #000000;
  }

  .right-box{
    width: 553px;
    height: 566px;
    background: #2F9AE3;
    box-shadow: 3px 0px 16px 0px #000000;
  }

}
.form-container{
  height: 700px;
  width: 100%;
  display: flex;
  margin: 0px 0px 0px 30px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  border:1px darkslategray solid;
  .left-box{
    width: 50%;
    height: 100%;
    background: #FFFFFF;
    border:1px yellow solid;
  }

  .right-box{
    width: 50%;
    height: 100%;
    background: #ffffff;
    border:1px black solid;
  }

}
</style>

